<!--
 * @Author: Liujingjing
 * @Date: 2022-01-08 10:13:48
 * @LastEditTime: 2022-01-08 19:11:05
 * @LastEditors: Liujingjing
 * @Description: 
 * @FilePath: \am\am-dashboard\src\pages\m3\components\Map1.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div ref="map1_container" style="height:95%"></div>
</template>
<script>
import {get} from '../../../utils/request'
export default {
    data() {
        return {

        }  
    },
    mounted(){
        this.initMap();
    },
    methods:{
        initMap(){
            //1.地图初始化
            var map = new AMap.Map(this.$refs.map1_container, {
            zoom:11,//级别
            center: [112.583804,37.423954],//中心点坐标
            viewMode:'3D'//使用3D视图
        });
            // 2. 行政区轮廓
        let polygons=[];
        var opts = {
            subdistrict: 0,   //获取边界不需要返回下级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'district'  //查询行政级别为 市
        };
        let district = new AMap.DistrictSearch(opts);
        district.setExtensions('all');
        district.search('太谷区', function(status, result) {
            map.remove(polygons)//清除上次结果
            polygons = [];
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: '#80d8ff',
                        strokeColor: '#0091ea'
                    });
                    polygons.push(polygon);
                }
            }
            map.add(polygons)
            map.setFitView(polygons);//视口自适应
        });
            // 3. 打点

        let url = "/dashboard/findEngineerDeviceTree"
        get(url).then(resp => {
            let edTree = resp.data;
           // console.log(edTree)
            // // 获取设备
            let devices = [];
            edTree.forEach(item => {
                devices.push(...item.children)
            })
            console.log(devices);

            // // 每一个设备打一个点
            devices.forEach(item => {
            var marker = new AMap.Marker({
                position: item.position,
                title: item.name,
            });
            map.add(marker);
            })
        })
        
        }
    }
}
</script>